<template>
	<view class="recharge-page full box relative bg-primary flex-col">
		<view class="device-box">
			<image mode="aspectFill" class="device-img"></image>
			<view class="device-info">
				<view class="device-no">
					<text>设备型号：{{ shebei.leixing || "" }}</text>
				</view>
				<view class="device-no">
					<text>当前套餐：首充980套餐</text>
				</view>
				<view class="device-no">
					<text>设备编号：{{ shebei.bianma || "" }}</text>
				</view>
			</view>
			<view class="device-right">
				<view class="device-value">
					<text>{{ shebei_xinxi.shengyu_rongliang || 0 }}升</text>
				</view>
				<view class="device-label">
					<text>剩余水量</text>
				</view>
			</view>
		</view>
		<view class="w-wrap">
			<view class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<view class="package-list">
						<view class="package-item" v-for="(item,index) in list" :key="index"
							@click="handleCheckItem(item)">
							<view class="checkbox-item" :class="[activeId === item.id ? 'active' : '']">
								<u-icon color="#ffffff" size="34rpx" name="checkmark" />
							</view>
							<view class="package-details">
								<view class="desc-item">套餐名称：{{ item.name || "" }}</view>
								<view class="desc-item">套餐内容：{{ item.taocan_neirong || "" }}</view>
								<view class="desc-item" v-if="item.day_num">套餐时限：{{ item.day_num || 0 }}天</view>
								<view class="desc-item">套餐说明：{{ item.taocan_shuoming || "" }}</view>
								<view class="desc-item">原价：￥{{ item.yuanlai_price }}元</view>
								<view class="desc-item">水电补贴：<text class="active-text">-￥{{ item.butie_price }}</text>元
								</view>
								<view class="desc-item">现价：￥{{ item.pay_price }}元</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
		<view class="page-footer">
			<u-button shape='circle' type="primary" @click="handleRecharge">立即充值</u-button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { request, showLoading, toast } from "@/utils/tool.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				activeId: "",
				list: [],
				shebei: {},
				shebei_xinxi: {}
			}
		},
		created() {
			this.initDeviceData()
		},
		methods: {
			async handleRecharge() {
				const { activeId } = this
				if (!activeId) return toast({ title: "请选择充值套餐" })
				const target = this.list.find(item => item.id === activeId)
				if (!target) return toast({ title: "请选择充值套餐" })
			},
			handleCheckItem(rowItem) {
				const { id } = rowItem
				if (this.activeId !== id) {
					this.activeId = id
					return
				}
				this.activeId = ""
			},
			upCallback(ev) {
				const { num, size } = ev
				this.initData(num, size)
			},
			async initData(page, limit) {
				const resp = await request({
					url: "/recharge/rechargeconfiglists",
					method: "GET",
					data: { page_no: page, page_size: limit }
				})
				const { lists, count } = resp.data
				if (page === 1) {
					this.list = []
				}
				this.list.push(...lists)
				this.mescroll.endBySize(lists.length, count)
			},
			async initDeviceData() {
				const hide = showLoading("正在获取")
				const resp = await request({
					url: "/index/index",
					method: "GET",
					data: {
						shebei_id: 1
					}
				}).catch(hide)
				const data = resp.data
				if (data) {
					const { shebei, shebei_xinxi } = data
					this.shebei = shebei
					this.shebei_xinxi = shebei_xinxi
				}
				hide()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recharge-page {
		.page-footer {
			padding: 16rpx 32rpx;
			background-color: #fff;
		}

		.device-box {
			margin: 24rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 18rpx 20rpx;
			display: flex;

			.device-img {
				width: 100rpx;
				height: 100rpx;
			}

			.device-right {
				margin-left: auto;

				.device-value {
					font-weight: 400;
					font-size: 24rpx;
					color: #EB4941;
					line-height: 44rpx;
				}

				.device-label {
					font-weight: 400;
					font-size: 24rpx;
					color: #535353;
					line-height: 44rpx;
				}
			}

			.device-info {
				margin-left: 16rpx;

				.device-no {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}

		.package-list {
			padding: 28rpx 20rpx 0;

			.package-item {
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				padding: 28rpx 30rpx;
				margin-bottom: 24rpx;


				&:last-child {
					margin-bottom: 0;
				}

				.package-details {
					margin-left: 22rpx;

					.desc-item {
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 44rpx;
						margin-bottom: 4rpx;
						word-break: break-all;
						white-space: pre-wrap;

						.active-text {
							color: #EB4941;
						}

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

				.checkbox-item {
					width: 56rpx;
					height: 56rpx;
					flex-shrink: 0;
					border: 2rpx solid #809CF6;
					border-radius: 50%;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;

					&.active {
						background-color: #3361F0;
						border-color: #3361F0;
					}
				}
			}
		}
	}
</style>